<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
  <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
  <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
  <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
  <style>
    .err{
      color: red;
      font-size: 14px;
      font-weight: bold;
    }
  </style>
</head>
<body>
<div id="app">

  <el-form :inline="true"  class="demo-form-inline" style="width: 100% ;margin-left: 100px">

    <el-select v-model="hall.stuId" placeholder="请选择">
      <el-option label="全部" value="请选择影院"></el-option>
      <el-option
              v-for="item in studios"
              :key="item.name"
              :label="item.name"
              :value="item.id">
      </el-option>
    </el-select>
    <el-form-item label="院场类型">
      <el-input  placeholder="院场类型" v-model="hall.type"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="cha">查询</el-button>
    </el-form-item>
    <el-form-item>
    <el-button type="primary" style="margin-left: 40px" @click="add">新增</el-button>
    </el-form-item>
    <el-table
            :data="hall.halls"
            style="width: 100% ;">
      <el-table-column
              label="影院名"
              width="240">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.studios?.name }}</span>
        </template>
      </el-table-column>

      <el-table-column
              label="厅号"
              width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column
              label="位置"
              width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.addr }}</span>
        </template>
      </el-table-column>

      <el-table-column
              label="类型"
              width="140">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.type }}</span>
        </template>
      </el-table-column>

      <el-table-column
              label="数量"
              width="140">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.num }}</span>
        </template>
      </el-table-column>

      <el-table-column
              label="状态"
              width="140">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.studios?.status}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  @click="Object.assign(hal,scope.row);dialogVisible=true;operator='change'">编辑
          </el-button>
          <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-form>

  <div class="final" style="display: flex;justify-content: center;margin-top: 15px">
    <el-pagination class="c1"
                   layout="prev, pager, next"
                   :page-size="this.hall.num"
                   :current-page="this.hall.current"
                   @current-change="changeCurrent"
                   :total="this.hall.total">
    </el-pagination>
  </div>

  <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%">
 <div v-if="operator=='change'">
   厅号：<el-input v-model="hal.name"  placeholder="请输入内容"></el-input>
   位置：<el-input v-model="hal.addr" placeholder="请输入内容"></el-input>
   类型：<el-input v-model="hal.type" placeholder="请输入内容"></el-input>
   数量：<el-input v-model="hal.num" placeholder="请输入内容"></el-input>
   <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="change">确 定</el-button>
  </span>
 </div>
    <div v-else>
      厅号：<el-input v-model="incre.name"  placeholder="请输入内容"></el-input>
      <span class="err" v-html="msgs.name"></span><br>
      位置：<el-input v-model="incre.addr" placeholder="请输入内容"></el-input>
      <span class="err" v-html="msgs.addr"></span><br>
      类型：<el-input v-model="incre.type" placeholder="请输入内容"></el-input>
      <span class="err" v-html="msgs.type"></span><br>
      数量：<el-input v-model="incre.num" placeholder="请输入内容"></el-input>
      <span class="err" v-html="msgs.num"></span><br>

      影院：<el-select v-model="incre.stuId" placeholder="请选择" style="margin-top: 20px">
        <el-option
                v-for="item in studios"
                :key="item.name"
                :label="item.name"
                :value="item.id">
        </el-option>
      </el-select><br/>
        <span class="err" v-html="msgs.stuId"></span><br>


      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="increase">确 定</el-button>
  </span>
    </div>

  </el-dialog>


</div>
<script>
  let app=new Vue({
    el:"#app",
    data:{
      value: '',
      hall:{current:1,num:6,halls:[],type:'',stuId:'请选择影院',total:0},
      dialogVisible: false,
      hal:{id:'', name:'', addr:'', type:'', num:'', stuId:'', status:''},
      incre:{id:'', name:'', addr:'', type:'', num:'', stuId:'', status:''},
      msgs:{id:'', name:'', addr:'', type:'', num:'', stuId:'', status:''},
      operator:'',
      studios:[],
    },
    methods:{
      query(){
        axios.post(`../../hall/query?current=${this.hall.current}&num=${this.hall.num}
          &type=${this.hall.type}&stuId=${this.hall.stuId}`).then(res=>{
          this.hall.total=res.data.total;
          this.hall.halls=res.data.records;
          console.log(res.data)
        });
      },
      changeCurrent(pager){
        this.hall.current=pager;
        this.query();
      },
      handleEdit(index, row) {
        this.dialogVisible=true;
        console.log(index, row);
      },
      handleDelete(index, row) {
       let flag=confirm("你确定要删除？");
       if(flag){
         axios.get(`../../hall/del?id=${row.id}`).then(res=>{
          if(res.data.code==1){
            this.$alert(res.data.msg);
            this.query();
          }else if(res.data.code==-1){
            this.$alert(res.data.msg)
          }
         })
       }
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
      },
      change(){
        this.dialogVisible=false;
       axios.post("../../hall/change",this.hal).then(res=>{
        if(res.data.code==1){
          this.query();
          this.$message(res.data.msg)
        }else if(res.data.code==-1){
          this.$alert(res.data.msg);
        }
       })
      },
      increase(){
        axios.post("../../hall/add",this.incre).then(res=>{
          this.msgs={
            id:'', name:'', addr:'', type:'', num:'', stuId:'', status:''};
          if(res.data.code == 1){
            this.query();
            this.dialogVisible=false;
            this.incre={id:'', name:'', addr:'', type:'', num:'', stuId:'', status:''};
            this.$message(res.data.msg);
            return;
          } else if(res.data.code==0){
            res.data.data.forEach(err=>{
              if(this.msgs[ err.field ]){
                this.msgs[ err.field ] += "<br>"
              }
              this.msgs[ err.field ] += err.defaultMessage;
            });
            this.$alert(res.data.msg);
            console.log(this.msgs)
          }

        })
      },
      cha(){
        this.hall.current=1;
        this.query();
      },
      add(){
        this.operator='ad';
        this.dialogVisible=true;
      }


    },
    created() {
      axios.get("../../hall/selStudios").then(res=>{
        this.studios=res.data;
        console.log(res.data);
      })
      this.query();
    }
  })
</script>
</body>
</html>